import React, {Component} from 'react'
import {shopView, addShop} from '../../api/shop'
import { Form, Input, Button} from 'antd'
import MyUpload from '../../components/Upload'
import {connect} from 'react-redux'
import './shop.less'

class Shop extends Component{
  constructor(props){
    super(props)
    this.state={
      id: '',
      name: '',
      logoUrl: '',
      logoUrlId: '',
      address: '',
      phone: ''
    }
  }
  getShops = async(id) => {
    const result = await shopView(id)
    if(result.code === 0){
      const {name, logoUrl, phone, address, logoUrlId} = result.data
      this.setState({
        name,
        logoUrl,
        logoUrlId,
        phone,
        address
      })
    }
  }
  componentDidMount(){
    const id = this.props.user.id
    this.setState({
      id
    })
    this.getShops(id)
  }
  handleChange = e => {
    if (e.file.status === 'done') {
      this.setState({
        logoUrlId: e.file.response.data.id,
        logoUrl: e.file.response.data.url
      })
    }
  };
  onSubmit = (e) => {
    // 阻止事件默认行为
    e.preventDefault()
    // 进行表单控件的校验
    this.props.form.validateFields(async (err, values) => {
      const data = {
        id: this.state.id,
        name: values.name,
        logoUrl: this.state.logoUrl,
        logoUrlId: this.state.logoUrlId,
        address: values.address,
        phone: values.phone
      }
      if(!err){
        addShop(data)
      } else {
        console.log(err)
      }
    })
  }
  render(){
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 4,
        },
      },
    };
    return (
      <div classs="shop">
        <Form {...formItemLayout} >
          <Form.Item label="店铺名称">
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请填写您的店铺名称!' }],
              initialValue: this.state.name
            })(
              <Input placeholder="请输入店铺名称" />
            )}
          </Form.Item>
          <Form.Item label="店铺Logo">
            <MyUpload logoUrl={this.state.logoUrl} handleChange={this.handleChange}></MyUpload>
          </Form.Item>
          <Form.Item label="详细地址">
            {getFieldDecorator('address', {
              rules: [{ required: true, message: '公司地址为必填项!' }],
              initialValue: this.state.address
            })(
              <Input placeholder="请输入公司详细地址" />
            )}
          </Form.Item>
          <Form.Item label="联系方式">
            {getFieldDecorator('phone', {
              rules: [{ required: true, message: '联系方式为必填项!' }],
              initialValue: this.state.phone
            })(
              <Input placeholder="请输入公司联系方式" />
            )}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" onClick={this.onSubmit} htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
export default connect(
  state => ({user: state.user})
)(Form.create()(Shop))